import React, { Component } from "react"
import Template from "components/UI/template"
import { messages } from "share/common"
import Info from "components/info"
import { Button, Badge, message } from 'antd'
import { AdvancedTable } from "components/index"
import SlideFrame from "components/slide-frame"
import ExportRule from "./export-rule"
import ExportDetailRule from "./export-detail-rule"
import ExportService from "./export-service"

const { Header, Middle } = Template;

class ExportDetail extends Component {

  state = {
    info: {},
    infoLoading: false
  };

  componentDidMount () {
    this.getInfo();
  }

  attributes = [
    { title: messages('finance-4.key398')/*报盘文件模版编码*/, dataIndex: 'templateCode' },
    { title: messages('finance-4.key399')/*报盘文件模版名称*/, dataIndex: 'templateName' },
    { title: messages('finance-4.key400')/*分配银行*/, dataIndex: 'bankName' },
    { title: messages('finance-4.key401')/*是否预置*/, dataIndex: 'isPreset', render: value => value ? messages('common.yes')/*是*/ : messages('common.no')/*否*/ },
    {
      title: messages('common.column.status')/*状态*/, dataIndex: 'isEnabled',
      render: value => (
        <Badge
          status={value ? 'success' : 'default'}
          text={value ? messages('finance-4.key344')/*启用temp*/ : messages('finance-4.key345')/*禁用temp*/}
        />
      )
    }
  ];

  columns = [
    { title: messages('common.sequence')/*序号*/, dataIndex: 'sequence' },
    { title: messages('finance-4.key389')/*字段名称*/, dataIndex: 'fieldName' },
    { title: messages('finance-4.key390')/*字段类型*/, dataIndex: 'fieldTypeName' },
    { title: messages('finance-4.key382')/*来源字段*/, dataIndex: 'sourceFieldName' },
    { title: messages('finance-4.key383')/*固定字符*/, dataIndex: 'fieldValue' },
    { title: messages('finance-4.key396')/*逻辑字段*/, dataIndex: 'logicFieldName' },
    { title: messages('finance-4.key397')/*字段格式*/, dataIndex: 'fieldFormatName' },
    {
      title: messages('common.operation')/*操作*/, dataIndex: '',
      render: (value, record) => (
        <div>
          <a onClick={() => this.handleRule(record)}>{messages('common.edit')/*编辑*/}</a>
          <span className="ant-divider"/>
          <a onClick={() => this.handleDeleteRule(record)}>{messages('common.delete')/*删除*/}</a>
        </div>
      )
    }
  ];

  getInfo = () => {
    const { id } = this.props.params;
    this.setState({ infoLoading: true });
    ExportService.getDetailInfo(id)
      .then(res => {
        this.setState({ info: res.data });
      })
      .finally(() => {
        this.setState({ infoLoading: false });
      })
  };

  handleEditInfo = () => {
    const { info } = this.state;
    SlideFrame.open({
      content: ExportRule,
      title: messages('finance-4.key402')/*报盘文件模版*/,
      params: { record: info },
      afterClose: () => this.getInfo()
    }, this)
  };

  handleRule = (record = {}) => {
    const { id } = this.props.params;
    SlideFrame.open({
      content: ExportDetailRule,
      title: messages('finance-4.key403')/*模版字段*/,
      params: { record, id },
      afterClose: () => this.advancedTableRef.getList()
    }, this)
  };

  handleDeleteRule = record =>{
    ExportService.deleteList(record.id).then(() => {
      message.success(messages('common.delete.successful')/*删除成功*/);
      this.advancedTableRef.getList();
    }).catch(e => {
      message.error(e.response.data.message)
    })
  };

  service = (page, size) => {
    const { id } = this.props.params;
    return ExportService.getDetailList({page, size, nachaTemplateId: id})
  };

  render() {
    const { infoLoading, info } = this.state;
    return (
      <Template>
        <Header>
          <Info
            title={messages('common.baseInfo')/*基本信息*/}
            attributes={this.attributes}
            dataSource={info}
            loading={infoLoading}
          >
            <Button type='primary' onClick={this.handleEditInfo}>{messages('common.edit')/*编辑*/}</Button>
          </Info>
        </Header>
        <Middle>
          <AdvancedTable.SimpleTable
            index
            service={this.service}
            columns={this.columns}
            rowKey={'id'}
            onRef={advancedTableRef => this.advancedTableRef = advancedTableRef}
          >
            <Button type='primary' onClick={() => this.handleRule()}>{messages('common.create')/*新建*/}</Button>
          </AdvancedTable.SimpleTable>
        </Middle>
      </Template>
    )
  }

}

export default ExportDetail
